<template>
	<div>
		<el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="130px">
			<el-form-item label="是否启用服务费" prop="serviceConstStatus">
				<el-radio-group @change="serve" v-model="dataForm.serviceConstStatus">
					 <el-radio label="1">是</el-radio>
					<el-radio label="2">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<div v-show="dataForm.serviceConstStatus === '1'">
				<el-form-item label="服务费率" prop="serviceConstRatio">
					<el-input-number :min="1" :max="100" style="width: 20%;" v-model="dataForm.serviceConstRatio" placeholder="服务费率%(1-100)"></el-input-number>
				</el-form-item>
				<el-form-item label="营业时段" prop="businessTime">
					<el-checkbox-group v-model="dataForm.businessTime">
						<el-checkbox border v-for="time in businessTime" :key="time.timeIntervalId" :label="time.timeIntervalId">{{ time.timeIntervalName }}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="餐厅类型" prop="deskArea">
					<el-checkbox-group @change="getRegion" v-model="dataForm.deskArea">
						<el-checkbox border v-for="time in deskArea" :key="time.id" :label="time.id">{{ time.storeTypeName }}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="区域名称">
					<div v-for="foo in regionList">
						<el-checkbox-group v-model="dataForm.regionList">
							<el-checkbox border v-for="f in foo" :key="f.id" :label="f.id">
								{{ f.regionName }}
								<span style="color: red;">({{ f.storeTypeName }})</span>
							</el-checkbox>
						</el-checkbox-group>
					</div>
				</el-form-item>
				<el-form-item label="菜类">
					<el-checkbox-group v-model="dataForm.foods">
						<el-checkbox border v-for="time in foods" :key="time.id" :label="time.id">{{ time.classificationName }}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
			</div>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="dataFormSubmit()" :disabled="disabledSubmit">确定</el-button>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			foods: [],
			regionList: [],
			deskArea: [],
			storeTypeList: [],
			businessTime: [],
			visible: false,
			dataForm: {
				id: 0,
				sellerId: '',
				serviceConstStatus: '2',
				serviceConstRatio: '',
				businessTime: [],
				deskArea: [],
				regionList: [],
				foods: [],
				createTime: '',
				remark: '',
				serviceVisle: false,
				sign:''
			}
		};
	},
	created() {

		this.init();
		//this.serviceInfo();
	},

	methods: {
		serve() {
			if (this.dataForm.serviceConstStatus === '1') {
				this.dataForm.serviceConstStatus = '1';
				this.sign = 1
				this.init()
			} else {
				this.dataForm.serviceConstStatus = '2';
				this.dataForm.regionList = []
				this.dataForm.deskArea = []
				this.dataForm.businessTime = []
				this.dataForm.foods = []
			}
		},

		getRegion() {
			//区域
			this.$http({
				url: this.$http.adornUrl('/store/tstoreregion/getRegionList'),
				method: 'post',
				data: this.$http.adornData({
					storeTypeIdList: this.dataForm.deskArea
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.regionList = data.regionList;
				}
			});
		},

		init() {
			//参加时段
			this.$http({
				url: this.$http.adornUrl('/store/tstoretimeinterval/list'),
				method: 'get'
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.businessTime = data.page.list;
				} else {
					this.businessTime = [];
				}
			});

			//餐厅类型
			this.$http({
				url: this.$http.adornUrl('/store/tstoretype/list'),
				method: 'get'
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.deskArea = data.page.list;

				} else {
					this.deskArea = [];
				}
			});

			//菜类
			this.$http({
				url: this.$http.adornUrl('/store/tstorefoodtype/list'),
				method: 'get',
        params: this.$http.adornParams({
          'page': 1,
          'limit': 100,
          'key':''
        })
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.foods = data.page.list;
				} else {
					this.foods = [];
				}
			});

			this.$http({
				url: this.$http.adornUrl(`/store/tstoreserviceconst/info`),
				method: 'get',
				params: this.$http.adornParams()
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dataForm.id = data.tStoreServiceConst.id;
					if(this.sign === 1){
						this.dataForm.serviceConstStatus = '1'
					}else{
						this.dataForm.serviceConstStatus = data.tStoreServiceConst.serviceConstStatus.toString()
					}

					this.dataForm.serviceConstRatio = data.tStoreServiceConst.serviceConstRatio;
					this.dataForm.businessTime = data.tStoreServiceConst.businessTimeList;
					this.dataForm.deskArea = data.tStoreServiceConst.deskAreaList;
					this.dataForm.foods = data.tStoreServiceConst.foodsList;
					this.dataForm.regionList = data.tStoreServiceConst.regionList
					this.dataForm.createTime = data.tStoreServiceConst.createTime;
					this.dataForm.remark = data.tStoreServiceConst.remark;
				}
			});
		},


		// 表单提交
		dataFormSubmit() {
			this.$refs['dataForm'].validate(valid => {
				if (valid) {
					this.$http({
						url: this.$http.adornUrl(`/store/tstoreserviceconst/save`),
						method: 'post',
						data: this.$http.adornData({
							id: this.dataForm.id || undefined,
							sellerId: this.dataForm.sellerId,
							serviceConstStatus: this.dataForm.serviceConstStatus,
							serviceConstRatio: this.dataForm.serviceConstRatio,
							businessTimeList: this.dataForm.businessTime,
							deskAreaList: this.dataForm.deskArea,
							foodsList: this.dataForm.foods,
							regionList: this.dataForm.regionList,
							createTime: this.dataForm.createTime,
							remark: this.dataForm.remark
						})
					}).then(({ data }) => {
						if (data && data.code === 0) {
							this.$message({
								message: '操作成功',
								type: 'success',
								duration: 1500
							});
							this.init()
						} else {
							this.$message.error(data.msg);
						}
					});
				}
			});
		}
	}
};
</script>
